<template>
  <div class="content">
    <div class="content-block">
      <div class="title">{{ appTitle }}</div>

      <div class="block-row">
        <div class="block-col policy">
          <div class="policy-block">
            <div class="top-tab-block">
              <div :class="noticeActive===1?'active':''" @click="noticeActive=1" class="tab-item">帮扶政策</div>
              <div :class="noticeActive===3?'active':''" @click="noticeActive=3" class="tab-item">职场资讯</div>
              <div :class="noticeActive===2?'active':''" @click="noticeActive=2" class="tab-item">通知公告</div>
              <router-link :to="{name:'news'}" class="more">
                <div >更多</div>
              </router-link>
            </div>
            <div class="policy-list" v-loading="noticeLoading">
              <template v-if="notice.length>0">
                <div class="policy-item" v-for="(item) in notice">
                  <div class="point"></div>
                  <div class="policy-title" @click="getNewById(item.id)">{{ item.title }}</div>
                  <div class="date">{{item.crt_time }}</div>
                </div>
              </template>
              <el-empty v-else></el-empty>
            </div>
          </div>
          <template v-if="!user">
            <router-link  :to="{name:'positionFiltrate'}" class="menu-block" style="width:50%">
              <div class="menu-block">
                <div class="menu-title">找工作</div>
                <div class="sub-title">推荐岗位和我要求职<img src="@/assets/images/home/index/enter.png" class="enter">
                </div>
              </div>
            </router-link>
            <router-link :to="{name:'personalFiltrate'}" class="menu-block" style="width:49%;margin-left: 9px">
              <div class="menu-block">
                <div class="menu-title">找人才</div>
                <div class="sub-title">招聘者和内推者入口<img src="@/assets/images/home/index/enter.png" class="enter">
                </div>
              </div>
            </router-link>
          </template>
          <template v-else>
            <router-link v-if="identity==1" :to="{name:'positionFiltrate'}" class="menu-block">
              <div class="menu-block">
                <div class="menu-title">找工作</div>
                <div class="sub-title">推荐岗位和我要求职<img src="@/assets/images/home/index/enter.png" class="enter">
                </div>
              </div>
            </router-link>
            <router-link v-if="identity==2" :to="{name:'personalFiltrate'}" class="menu-block">
              <div class="menu-block">
                <div class="menu-title">找人才</div>
                <div class="sub-title">招聘者和内推者入口<img src="@/assets/images/home/index/enter.png" class="enter">
                </div>
              </div>
            </router-link>
          </template>

        </div>
      </div>
      <div style="display: flex">
        <div class="block-row" style="margin-right: 10px;">
          <router-link :to="{name:'live'}">
            <img src="@/assets/images/home/index/20221201103415.jpg" style="height: 170px; border-radius: 6px;">
          </router-link>
        </div>
        <div class="block-row">
          <div class="block-col banner">
            <img class="img" style="height: auto;position: relative;top: -20px"
                 src="@/assets/images/home/index/fly.png"/>
            <div class="text-block">
              <div class="main-title">扫码打开就业有我小程序&nbsp;&nbsp;&nbsp;&nbsp;>>></div>
              <div class="sub-title">上就业有我&nbsp;&nbsp;享政策大礼包</div>
            </div>
            <img class="img" src="@/assets/images/qrcode.jpg"/>
          </div>
        </div>
      </div>
      <div class="block-row">
        <div class="block-col name1">
          <div class="name active" v-if="!user||identity==1">岗位推荐</div>
          <div class="name active" v-if="identity==2">人才推荐</div>
        </div>
      </div>
      <div class="job-item" v-if="!user||identity==1" v-loading="industryLoading">
        <div class="job-type" :class="industryActive===0 ? 'active':''" @click="industryActive=0">全部</div>
        <div @click="industryActive=item.id" :key="item.id" :data="item" v-for="(item) in industryRanking" class="job-type" :class="industryActive===item.id ? 'active':''">
          {{item.jobTitle}}
        </div>
      </div>
      <div class="block-row" v-if="!user||identity==1">
        <div class="block-col position" v-loading="positionLoading">
          <PositionItem class="position-item" :key="item.id" :data="item" v-for="(item) in position"></PositionItem>
          <router-link :to="{name:'positionFiltrate'}" class="position-item more">
            <div>更多职位</div>
            <div class="more">点击查看></div>
          </router-link>
        </div>
      </div>
      <div  v-if="!user||identity==1">
      <div class="block-row">
        <div class="block-col name1">
          <div class="name active" >热门企业</div>
        </div>
      </div>
        <div v-if="attentionList.length>0" class="block-e">
          <router-link :to="{name:'company',query:{id:item.id}}"
                       v-for="(item,index) in attentionList" :key="item.id" class="list-item" >
            <img src="@/assets/images/company_default.png" class="photo" alt="" v-if="item.logoUrl===''">
            <img :src="item.logoUrl" class="photo" alt="" v-show="item.logoUrl">
            <div class="info-block">
              <div class="name">{{ item.brandName }}</div>
              <div class="info-item">
                <div class="other" v-if="item.enterpriseName">{{ item.enterpriseName }}&nbsp;/&nbsp;</div>
                <div class="other" v-else>暂无行业&nbsp;;/&nbsp;</div>
                <div class="other"> {{ item.scaleName }}</div>
              </div>
              <div class="other">招聘职位{{ item.fairCount }}个</div>
            </div>
          </router-link>
        </div>
      </div>

      <div class="block-row" v-if="identity==2">
        <div class="block-col personal" v-loading="personalLoading">
          <router-link class="personal-item" :to="{name:'personalDetail',query:{id:item.user.cid,}}"
                       v-for="(item) in personal.list" :key="item.id">
            <div class="information-item">
              <div class="personal-img">
                <img :src="item.user.faceUrl" class="personal-img">
              </div>
              <div class="name-item">
                <div class="personal-name">{{ item.realName }}</div>
                <div class="personal-wage">{{ item.salaryMin }}-{{ item.salaryMax }}元</div>
              </div>
              <div class="personal-information">
                <div class="sexText">
                  {{ item.birthday }}岁&nbsp;&nbsp;/&nbsp;
                </div>
                <div class="sexText">
                  {{ item.educationText }}&nbsp;&nbsp;/
                </div>
                <div class="sexText" v-if="item.workTimeStart==='0年'">
                  工作经验小于一年
                </div>
                <div class="sexText" v-else>
                  {{item.workTimeStart }}工作经验
                </div>
              </div>
            </div>
            <div class="personal-label-block">
              <div v-for="(item1,index) in item.label" class="personal-label-item">{{ item1 }}</div>
            </div>
            <div class="address-item">
              <div class="address-title">想找：</div>
              <div class="personal-address">
                {{ item.regArea }}&nbsp;&nbsp;/&nbsp;&nbsp;{{ item.postName }}
              </div>
            </div>
          </router-link>
          <router-link :to="{name:'personalFiltrate'}" class="personal-item more">
            <div>更多人才</div>
            <div class="more">点击查看></div>
          </router-link>
        </div>
      </div>
      <div class="block-row">
        <div class="block-col jump">
          <router-link :to="{name:'difficult',query:{tabName:'就业困难人员专区'}}" class="text-block">
            <div class="text-block">
              <div class="main-title">就业困难人员专区</div>
            </div>
          </router-link>
        </div>

        <div class="block-col jump">
          <router-link :to="{name:'difficultDetail',query:{tabName:'三支一扶',type: 24}}" class="text-block">
            <div class="text-block">
              <div class="main-title">三支一扶</div>
              <div class="sub-title">西部计划、特岗教师</div>
            </div>
          </router-link>
        </div>
      </div>
      <div class="block-row">
        <div class="block-col job-fair">
          <div class="top-tab-block">
            <div :class="jobFairActive===1?'active':''" @click="jobFairActive=1" class="tab-item">现场招聘会</div>
            <div :class="jobFairActive===2?'active':''" @click="jobFairActive=2" class="tab-item">网络招聘会</div>
            <div :class="jobFairActive===3?'active':''" @click="jobFairActive=3" class="tab-item">校园招聘会</div>
            <router-link :to="{name:'jobIndex'}" class="more">
              <div>更多</div>
            </router-link>
          </div>
          <template v-if="jobFair.length>0">
            <div class="body-tab-block" v-loading="jobFairLoading">
              <div class="tab-item" v-for="(item) in jobFair" :key="item.id">
                <div class="jobFair-block">
                  <div class="jobTime-item">
                    <img src="@/assets/images/home/index/reserve.png" class="state-img" v-if="item.state===1" alt="">
                    <img src="@/assets/images/home/index/underway.png" class="state-img" v-if="item.state===2" alt="">
                    <img src="@/assets/images/home/index/finish.png" class="state-img" v-if="item.state===3" alt="">
                    <img :src="item.coverUrl" class="item-img" alt="">
                  </div>
                  <div class="job-item">
                    <div class="title-item">
                      <div class="body-title">{{ item.title }}</div>
                    </div>
                    <div class="time-item">
                      <div class="time-title">企业{{ item.qyCount }}家</div>
                      <div class="time-title">职位{{ item.zwCount }}个</div>
                    </div>
                  </div>
                </div>
                <div class="jobFair-time">
                  <div class="holdTime">{{ item.eventTimeStart }} 至 {{ item.eventTimeEnd }}</div>
                  <router-link :to="{name:'jobFair',query:{id:item.id}}" class="btn2">进入会场</router-link>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PositionItem from "@/components/PositionItem/PositionItem";
import {getNewsList} from "@/api/notice";
import {getIndustryRankingApi, getPublish} from "@/api/position";
import {getCustomerListApi} from "@/api/personal";
import {findAllByCrtTimeApi, getEnterpriseListApi} from "@/api/jobFair"
import {mapGetters} from "vuex";

export default {
  name: "Index",
  comments: {PositionItem},
  data() {
    return {
      industryRanking:[],
      industryActive:0,
      industryLoading:false,

      noticeLoading:false,
      noticeActive:1,
      notice:[],

      appTitle:'',

      positionLoading:false,
      position:[],

      personalLoading:false,
      personal:[],

      jobFairActive:1,
      jobFairLoading:false,
      jobFair:[],
      attentionList: []
    }
  },
  methods: {
    getNewById(newsId) {
      this.$router.push({
        name: 'detail',
        query: {
          id: newsId,
          type: 1
        }
      })
    },
    getNoticeList(){
      this.noticeLoading=true
      getNewsList({type:this.noticeActive,page:1,limit:8}).then((res)=>{
        this.notice=res.list
      }).finally(()=>{
        this.noticeLoading=false
      })
    },
    getPosition(){
      if(this.identity!=2)
      {
        this.positionLoading=true
        getPublish({page:1,limit:8,jobType:this.industryActive,jobLevel:3,orderDate: 1}).then((res)=>{
          this.position=res.list
        }).finally(()=>{
          this.positionLoading=false
        })
      }

    },
    getIndustryRanking(){
      this.industryLoading=true
      getIndustryRankingApi().then((res)=>{
        this.industryRanking=res
        console.log(this.industryRanking)
      }).finally(()=>{
        this.industryLoading=false
      })
    },


    getPersonal(){
      this.personalLoading=true
      getCustomerListApi({page:1,limit:8}).then((res)=>{
        this.personal=res
      }).finally(()=>{
        this.personalLoading=false
      })
    },
    getEnterpriseList(){
      this.jobFairLoading=true
      getEnterpriseListApi({page: 1,limit: 6}).then((res)=>{
        this.attentionList=res.list ?? []
      }).finally(()=>{
        this.jobFairLoading=false
      })
    },
    getJobFairList(){
      this.jobFairLoading=true
      findAllByCrtTimeApi({sceneType: this.jobFairActive}).then((res)=>{
        this.jobFair=res
      }).finally(()=>{
        this.jobFairLoading=false
      })
    },
  },
  watch: {//监听
    noticeActive: {
      handler() {
        this.getNoticeList()
      },
      immediate: true,//深度监听
    },
    jobFairActive: {
      handler() {
        this.getJobFairList()
      },
      immediate: true,//深度监听
    },
    industryActive:{
      handler() {
        this.getPosition()
      },
      immediate: true,//深度监听
    },
  },
  components: {PositionItem},
  computed: {
    ...mapGetters(['user', 'identity'])
  },
  mounted() {
    this.appTitle = this.appConfig.appTitle
    this.getNoticeList();
    this.getJobFairList();
    this.getEnterpriseList();
    this.getIndustryRanking();
    (this.identity==1||!this.user)&&this.getPosition();
    this.identity==2&&this.getPersonal();
  }
}
</script>

<style lang="scss" scoped>
$whiteTransparent: rgba(255, 255, 255, 0.9);
$borderRadius: 6px;
$interval: 15px;
.content {
  width: 100%;
  background: #f5e6d3 url("~@/assets/images/home/index/background.png") no-repeat -20px -50px;

  .content-block {
    width: $contentWidth;
    margin: 0 auto;
    padding-top: 70px;

    .block-e {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: 20px;
    .list-item {
      width: calc((100% - 20px) / 3);
      display: flex;
      flex-direction: row;
      border-radius: 5px;
      background: #fff;
      padding: 10px;
      cursor: pointer;
      margin-bottom: 20px;

      .photo {
        width: 70px;
        height: 70px;
        border-radius: 5px;
        margin-right: 10px;
      }

      .info-block {
        width: calc(100% - 80px);
        display: flex;
        flex-direction: column;
        justify-content: center;

        .name {
          font-size: 16px;
          font-weight: bold;
        }
        .other {
          color: $darkGray;
          font-size: 14px;
          margin-top: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .info-item{
          display: flex;
          flex-direction: row;
        }
      }
    }
      .list-item:hover {
        box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 盒子悬浮时阴影 */
      }
  }

    .job-item{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 6px;
      color: #999;
      padding: 0 20px;
      //background: #fff;
      border-radius: 2px;
      border-bottom: 1px solid $midGray;
      .job-type{
        cursor: pointer;
        font-size: 18px;
        padding-bottom: 20px;
        color: #666;
        margin-bottom: -2px;
      }
      .job-type.active{
        color: $red;
        font-size: 19px;
        font-weight: 600;
        border-bottom: 3px solid $red;
      }
      .job-type:hover{
        color: $red;
      }
    }
    .title {
      font-family: fzhzgbjt;
      font-size: 58px;
      color: $red;
      font-style: oblique;
      margin: 0 auto 70px auto;
      text-align: center;
    }

    .search-block {
      margin: 50px auto;
      display: flex;
      align-items: center;
      height: 70px;
      width: calc(100% - 210px);
      padding: 10px;
      border-radius: 40px;
      background: $whiteTransparent;

      .search-input {
        flex-grow: 1;
        background: none;
        height: 100%;
        margin-right: 20px;
        font-size: 24px;
        padding-left: 30px;
      }

      .search-btn {
        flex-grow: 0;
        width: 125px;
        height: 50px;
      }
    }

    .block-row {
      width: 100%;
      display: flex;
      margin-top: 20px;

      .block-col.job-fair {
        margin-bottom: $interval;
        width: 100%;
        background: #fff;

        .top-tab-block {
          display: flex;
          flex-direction: row;
          align-items: center;
          position: relative;
          height: auto;
          margin-top: 20px;

          .tab-item {
            font-size: 22px;
            border-bottom: 3px solid rgba(0, 0, 0, 0);
            margin: 0 20px;
            padding-bottom: 10px;
            cursor: pointer;
            font-weight: bold;
          }

          .tab-item.active {
            border-bottom: 3px solid $red;
            color: $red;
          }

          .more {
            position: absolute;
            right: 20px;
            color: $darkGray;
            font-size: 18px;
            cursor: pointer;
          }
        }

        .body-tab-block {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          .tab-item {
            background: #F6F6F6;
            width: calc((100% - 60px) / 2);
            margin: 5px 15px 20px 15px;
            padding: 20px;

            .jobFair-block {
              border-bottom: 1px solid #e4e4e4;
              margin-bottom: 5px;
              height: auto;
              display: flex;
              flex-direction: row;

              .jobTime-item {
                position: absolute;
                .state-img{
                  position: absolute;
                  width: 65px;
                  height: 25px;
                }
                .item-img {
                  width: 120px;
                  height: 80px;
                  padding-bottom: 10px;
                }
              }

              .job-item {
                display: flex;
                flex-direction: column;
                margin-left: 140px;
                margin-top: 30px;

                .title-item {
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  margin-top: 10px;

                  .body-title {
                    font-weight: bold;
                    font-size: 18px;
                    margin-bottom: 10px;
                    margin-top: -40px;
                  }
                }

                .time-item {
                  display: flex;
                  flex-direction: row;
                  margin-bottom: 20px;
                  align-items: center;
                  font-size: 15px;

                  .time-title {
                    color: $darkGray;
                    margin-right: 20px;
                  }
                }
              }
            }

            .jobFair-time {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              margin-top: 10px;
              align-items: center;

              .holdTime {
                color: $darkGray;
                font-size: 15px;
              }

              .btn2 {
                font-size: 15px;
                width: 100px;
                height: 30px;
                border-radius: 10px;
              }
            }
          }
        }
      }

      .block-col.college {
        background: #fff;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 20px;

        .top-tab-block {
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          //position: absolute;
          justify-content: space-between;
          margin-top: 10px;

          .tab-title {
            font-size: 22px;
            border-bottom: 3px solid rgba(0, 0, 0, 0);
            margin: 0 20px;
            padding-bottom: 10px;
            cursor: pointer;
            font-weight: bold;

          }

          .tab-title.active {
            border-bottom: 3px solid $red;
            color: $red;
          }

          .more {
            color: $darkGray;
            font-size: 18px;
            cursor: pointer;
            position: absolute;
            margin-left: 1150px;
          }
        }

        .college-block {
          display: flex;
          flex-direction: row;
          padding: 20px;
          margin-top: 10px;

          .college-item {
            background: #F6F6F6;
            width: calc((100% - 10px) / 4);
            display: flex;
            align-items: center;
            height: auto;
            padding: 20px;
            margin-right: 10px;
            justify-content: space-between;

            .college-img {
              width: 35px;
              height: 40px;
              position: absolute;
            }

            .name-item {
              display: flex;
              flex-direction: column;
              margin-left: 50px;

              .college-name {
                font-size: 18px;
                font-weight: bold;
              }

              .college-EnglishName {
                font-size: 12px;
                color: $darkGray;
                margin-top: 5px;
              }
            }
          }
        }
      }

      .block-col.policy, .block-col.login {
        //height: 442.5px;
      }

      .block-col.policy {
        width: $contentWidth;
        display: flex;
        flex-wrap: wrap;

        .policy-block {
          width: 100%;
          min-height: 432px;
          background: $whiteTransparent;
          padding: 20px;
          display: flex;
          flex-direction: column;
          border-radius: $borderRadius;
          margin-bottom: $interval;

          .top-tab-block {
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
            height: auto;
            margin-top: 10px;

            .tab-item {
              font-size: 22px;
              border-bottom: 3px solid rgba(0, 0, 0, 0);
              margin: 0 20px;
              padding-bottom: 10px;
              cursor: pointer;
              font-weight: bold;
            }

            .tab-item.active {
              border-bottom: 3px solid $red;
              color: $red;
            }

            .more {
              position: absolute;
              right: 20px;
              color: $darkGray;
              font-size: 18px;
              cursor: pointer;
            }
          }

          .policy-list {
            display: flex;
            flex-direction: column;

            .policy-item {
              display: flex;
              align-items: center;
              margin-top: 20px;
              cursor: pointer;

              .point {
                width: 3px;
                height: 3px;
                background: $red;
                border-radius: 50%;
                margin-right: 10px;
              }

              .policy-title {
                width: calc(100% - 95px - 13px - 10px);
                font-size: 19px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-right: 10px;
              }

              .date {
                width: 95px;
                color: $darkGray;
              }
            }
          }
        }

        .menu-block {
          width: calc((100% - 15px) / 2);
          height: 120px;
          border-radius: $borderRadius;
          //margin-right: $interval;
          display: flex;
          flex-direction: column;
          justify-content: center;
          cursor: pointer;

          div {
            margin-left: 30px;
          }

          .menu-title {
            color: #000;
            font-size: 28px;
            font-family: fzhzgbjt;
            font-style: oblique;
          }

          .sub-title {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: $darkGray;
            font-size: 18px;
            margin-top: 10px;

            .enter {
              width: 20px;
              height: 20px;
              margin-top: 3px;
              margin-left: 15px;
            }
          }
        }

        .menu-block:nth-child(2) {
          background: #fff url("~@/assets/images/home/index/job_search.png") no-repeat center right;
          background-position-x: calc(100% - 20px);
          background-size: auto 80%;
          width: 100%;
        }

        .menu-block:nth-child(3) {
          background: #fff url("~@/assets/images/home/index/talent.png") no-repeat center right;
          background-size: auto 80%;
          background-position-x: calc(100% - 20px);
          margin-right: 0;
        }
      }

      .block-col.login {
        width: calc((100% - 15px) / 3);
        background: #fff;
        border-radius: $borderRadius;
        padding: 30px;

        .login-tab-block {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin-bottom: 30px;

          .login-tab-item {
            font-size: 24px;
            border-bottom: 3px solid rgba(0, 0, 0, 0);
            margin-right: 40px;
            padding-bottom: 10px;
            cursor: pointer;
            color: $darkGray;
          }

          .login-tab-item.active {
            border-bottom: 3px solid $red;
            color: #000;
          }

          .login-tab-item:last-child {
            margin-right: 0;
          }
        }

        .login-form-block {
          width: 100%;

          .form-item {
            width: 100%;
            height: 50px;
            background: $lightGray;
            border-radius: 40px;
            margin-bottom: $interval;
            display: flex;
            flex-direction: row;
            align-items: center;

            .form-input {
              width: 100%;
              background: rgba(0, 0, 0, 0);
              height: 100%;
              font-size: 18px;
              padding: 0 20px;
            }

            .line {
              width: 3px;
              height: 20px;
              background: $midGray;
              flex-grow: 0;
            }

            .send-btn {
              color: $red;
              width: 120px;
              flex-grow: 0;
              text-align: center;
              cursor: pointer;
            }
          }

          .btn {
            width: 100%;
            height: 50px;
            margin-bottom: $interval;
            font-size: 22px;
          }
        }
      }

      .block-col.banner {
        width: 100%;
        height: 170px;
        border-radius: $borderRadius;
        background: $red;
        display: flex;
        align-items: center;
        justify-content: center;

        .img {
          width: 110px;
          height: 110px;
        }

        .text-block {
          font-family: fzhzgbjt;
          margin: 0 15px;

          div {
            color: #fff;
            font-style: oblique;
            text-align: center;
          }

          .main-title {
            font-size: 24px;
            margin-bottom: $interval;
          }

          .sub-title {
            font-size: 20px;
          }
        }
      }

      .block-col.name {
        width: 100%;
        background: #fff;
        display: flex;
        flex-direction: row;
        height: 50px;
        align-items: center;

        .name {
          font-size: 22px;
          margin: 0 20px;
          font-weight: bold;
          cursor: pointer;
        }

        .name.active {
          border-bottom: 3px solid $red;
          color: $red;
        }
      }
      .block-col.name1 {
        width: 100%;
        //background: #fff;
        display: flex;
        flex-direction: row;
        height: 45px;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
        .name {
          font-size: 32px;
          margin: 0 20px;
          font-weight: 600;
          cursor: pointer;
        }

        //.name.active {
        //  border-bottom: 3px solid $red;
        //  color: $red;
        //}
      }
      .block-col.position {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        //justify-content: space-between;
        .position-item {
          width: calc((100% - 30px) / 3);
          margin-right: 15px;
          margin-bottom: 15px;
        }

        .position-item:nth-child(3n) {
          margin-right: 0;
        }

        .position-item.more {
          align-items: center;
          justify-content: center;
          font-size: 15px;
          padding: 20px;
          display: flex;
          flex-direction: column;
          background: #fff;
          border-radius: 5px;
          height: 270px;

          .more {
            margin-top: 8px;
            font-size: 14px;
            color: $orange;
            cursor: pointer;
          }
        }
      }
      .block-col.personal {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        //justify-content: space-between;
        .personal-item {
          width: calc((100% - 30px) / 3);
          margin-right: 15px;
          margin-bottom: 15px;
          padding: 20px;
          background-color: #fff;
          height: 150px;

          .information-item {
            border-bottom: 1px solid $lightGray;

            .personal-img {
              width: 50px;
              height: 50px;
              position: absolute;
              margin-bottom: 15px;
              border-radius: 50%;
            }

            .name-item {
              display: flex;
              flex-direction: row;
              margin-left: 70px;
              margin-bottom: 15px;

              .personal-name {
                font-weight: bold;
                font-size: 18px;
              }

              .personal-wage {
                font-weight: bold;
                font-size: 18px;
                color: $orange;
                margin-left: 20px;
              }
            }

            .personal-information {
              margin-left: 70px;
              font-size: 13px;
              color: $darkGray;
              margin-top: 10px;
              margin-bottom: 15px;
              display: flex;
              flex-direction: row;
              padding-right: 10px;

              .sexText {
                color: $darkGray;
                //border-right: 1px solid $darkGray;
                padding-right: 3px;
                margin-right: 3px;
              }

              .education {
                color: $darkGray;
                //border-right: 1px solid $darkGray;
                padding-right: 3px;
                margin-right: 3px;
              }

              .workTimeStart {
                color: $darkGray;
              }
            }
          }

          .personal-label-block {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-top: 15px;

            .personal-label-item {
              margin-right: 10px;
              margin-bottom: 10px;
              color: $darkGray;
              background: $lightGray;
              padding: 4px 8px;
              font-size: 13px;
            }
          }

          .address-item {
            display: flex;
            flex-direction: row;
            font-size: 13px;

            .address-title {
              color: $darkGray;
              width: 40px;
            }

            .personal-address {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .personal-item:hover {
          box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 盒子悬浮时阴影 */
        }

        .personal-item:nth-child(3n) {
          margin-right: 0;
        }

        .personal-item.more {
          align-items: center;
          justify-content: center;
          font-size: 15px;
          padding: 20px;
          display: flex;
          flex-direction: column;
          background: #fff;
          border-radius: 5px;

          .more {
            margin-top: 8px;
            font-size: 14px;
            color: $orange;
            cursor: pointer;
          }
        }
      }

      .block-col.jump {
        width: calc((100% - 15px) / 2);
        height: 170px;
        border-radius: $borderRadius;
        margin-right: $interval;
        background: #ffc68f url("~@/assets/images/home/index/difficult.png") no-repeat center right;
        background-size: auto 80%;
        background-position-x: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 30px;

        .text-block {
          div {
            color: #fff;
            font-style: oblique;
          }

          .main-title {
            font-family: fzhzgbjt;
            font-size: 34px;
          }

          .sub-title {
            margin-top: 20px;
            font-size: 22px;
          }
        }
      }

      .block-col.jump:last-child {
        margin-right: 0;
        background: #bde2ff url("~@/assets/images/home/index/three_a_help.png") no-repeat center right;
        background-size: auto 80%;
        background-position-x: calc(100% - 40px);
      }

      .block-col.job-fair {

      }
    }
  }
}
</style>
